<template>
	<view class="fresh_fall">
		<uv-waterfall ref="waterfall"
			v-model="list"
			:add-time="100"
			columnGap="10"
			@changeList="changeList">
			<!-- 第一列数据 -->
			<template v-slot:list1>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
				<view class="fresh_box" v-for="item in list1" :key="item.id">
					<image :src="item.image" mode="widthFix"></image>
					<view class="fresh_name">{{item.name}}</view>
					<view class="fresh_footer">
						<text>￥{{item.sales_price}}</text>
						<view class="iconfont icon-tianjia"></view>
					</view>
				</view>
				</view>
			</template>
			<template v-slot:list2>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
				<view class="fresh_box" v-for="item in list2" :key="item.id">
					<image :src="item.image" mode="widthFix"></image>
					<view class="fresh_name">{{item.name}}</view>
					<view class="fresh_footer">
						<text>￥{{item.sales_price}}</text>
						<view class="iconfont icon-tianjia"></view>
					</view>
				</view>
				</view>
			</template>
		</uv-waterfall>
	</view>
</template>

<script>
	export default {
	  props: {
	    freshlist: {
	      type: Array,
	      default: () => []
	    }
	  },
	  data() {
	    return {
		  list:[],
	      list1: [],// 瀑布流第一列数据
	      list2: [],// 瀑布流第二列数据
	    }
	  },
		watch:{
			freshlist(newval){
				this.list = newval
			}
		},
		onHide(){
			this.$refs.waterfall.clear();
		},
	  methods: {
		// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
		changeList(e){
			this[e.name].push(e.value);
		},
		remove(){
			this.list = []
			this.$refs.waterfall.clear()
			this.list1 = []
			this.list2 = []
		}
	    }
	  }
</script>

<style lang="scss">
	.fresh_box{
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin-top: 20rpx;
		image{
			width: 300rpx;
		}
		.fresh_name{
			word-break:break-all; 
			width: 300rpx;
		}
		.fresh_footer{
			color:#ee0a0a ;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16rpx;
			.icon-tianjia{
				font-size: 36rpx;
				font-weight: bold;
				color: #06ba2e;
			}
		}
	}
</style>